/**
 * @Author:周邱艳
 * @Date:20200615
 * @Describle:这是组合详情页
 */

import React, { Component } from "react";
import {Card} from "antd";
import ReactEcharts from "echarts-for-react";
import axios from "axios";
import {URL} from '../../../index'

export default class Text1 extends Component{
    //返回柱状图配置对象
    constructor(props) {
        super(props);
        this.getCategorys()
        this.state={
            combinationYields:[],//总表
            total:[],//总数据
            vol:[],//小标识名字
            dat:[]//横坐标日期
        }
        //数据绑定
        this.getCategorys=this.getCategorys.bind(this)
        this.getOption=this.getOption.bind(this)
        this.concatArray=this.concatArray.bind(this)

    }

    getCategorys = () => {
        //数据请求
        axios({
            method:"GET",
            url:"sojson.com.json",

        }).then(
            (res) => {
                console.log(res.data.combinationYields)
                //状态码判断
                if(res.data.code===200){
                    var total=[]//初始化总数据
                    var vol=[]//初始化小标识名
                    var dat=[]//初始化横坐标日期
                    dat=res.data.combinationYields.slice(-1)[0]["newProTradeDate"]
                    console.log(dat)
                    for (let i=0;i<res.data.combinationYields.length;i++){
                        var name=res.data.combinationYields[i]["comName"]
                        var data=res.data.combinationYields[i]["newComIncome"]//数据
                        console.log(data)

                        //dat=this.concatArray(res.data.combinationYields[i]newProTradeDate)
                        //得到可视化总数据
                        total.push({name,type: 'line',data})
                        //得到标识名
                        vol.push(name)
                        //得到横坐标日期


                    }
                    console.log(res.data.combinationYields.comName)
                    //数据更新
                    this.setState({
                        combinationYields: res.data.combinationYields,
                        total:total,
                        vol:vol,
                        dat:dat
                    })
                    //状态码判断
                }else if(res.data.code === 500){
                    this.props.history.push('/serverError')
                }

            }
        ).catch(function (error) {//异常处理
            console.log(error);
        })
    }
    //组件挂载后
    componentDidMount() {
        this.getCategorys()

    }//去除重复数组
    concatArray(){
        let newArr = Array.prototype.concat.apply([], arguments)//没有去重复的新数组
        return Array.from(new Set(newArr))
    }
    //可视化
    getOption = () =>{


        return{
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: this.state.vol//标识名
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data:this.state.dat//横坐标this.state.dat
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series:this.state.total//可视化数据
        }
    }
    //数据渲染
    render() {

        return(
            <div>
                <Card title='原组合以及用户修改后的组合信息对比'>
                    <ReactEcharts option={this.getOption()}/>

                </Card>
            </div>
        )
    }
}
